
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>JavaScript this 关键字
</h1>
<p>面向对象语言中 this 表示当前对象的一个引用。</p>
<p>但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。</p>
<ul><li>
在方法中，this 表示该方法所属的对象。</li><li>
如果单独使用，this 表示全局对象。</li><li>
在函数中，this 表示全局对象。</li><li>
在函数中，在严格模式下，this 是未定义的(undefined)。</li><li>
在事件中，this 表示接收事件的元素。</li><li>
类似 call() 和 apply() 方法可以将 this 引用到任何对象。</li></ul>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person</span><span class="hl-code"> = </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">firstName</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">John</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">lastName</span><span class="hl-code"> : </span><span class="hl-quotes">"</span><span class="hl-string">Doe</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">id</span><span class="hl-code">       : </span><span class="hl-number">5566</span><span class="hl-code">,
  </span><span class="hl-identifier">fullName</span><span class="hl-code"> : </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">firstName</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">lastName</span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>方法中的 this</h2>
<p>在对象方法中， this 指向调用它所在方法的对象。</p>
<p>在上面一个实例中，this 表示 person 对象。 </p>
<p>fullName 方法所属的对象就是 person。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">fullName</span><span class="hl-code"> : </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">firstName</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">lastName</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>单独使用 this</h2>
<p>单独使用 this，则它指向全局(Global)对象。</p>
<p>在浏览器中，window 就是该全局对象为 [<b>object Window</b>]:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">x</span><span class="hl-code"> = </span><span class="hl-reserved">this</span><span class="hl-code">;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>严格模式下，如果单独使用，this 也是指向全局(Global)对象。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-quotes">"</span><span class="hl-string">use strict</span><span class="hl-quotes">"</span><span class="hl-code">;
</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">x</span><span class="hl-code"> = </span><span class="hl-reserved">this</span><span class="hl-code">;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>函数中使用 this（默认）</h2>
<p>在函数中，函数的所属者默认绑定到 this 上。</p>
<p>在浏览器中，window 就是该全局对象为 [<b>object Window</b>]:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>函数中使用 this（严格模式）</h2>
<p>严格模式下函数是没有绑定到 this 上，这时候 this  是 <strong>undefined</strong>。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-quotes">"</span><span class="hl-string">use strict</span><span class="hl-quotes">"</span><span class="hl-code">;
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>事件中的 this</h2>
<p>在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-code">&lt;</span><span class="hl-identifier">button</span><span class="hl-code"> </span><span class="hl-identifier">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">this.style.display='none'</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
点我后我就消失了
&lt;/</span><span class="hl-identifier">button</span><span class="hl-code">&gt;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>对象方法中绑定</h2>
<p>下面实例中，this 是 person 对象，person 对象是函数的所有者：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person</span><span class="hl-code"> = </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">firstName</span><span class="hl-code">  : </span><span class="hl-quotes">"</span><span class="hl-string">John</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">lastName</span><span class="hl-code">   : </span><span class="hl-quotes">"</span><span class="hl-string">Doe</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">id</span><span class="hl-code">         : </span><span class="hl-number">5566</span><span class="hl-code">,
  </span><span class="hl-identifier">myFunction</span><span class="hl-code"> : </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person</span><span class="hl-code"> = </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">firstName</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">John</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">lastName</span><span class="hl-code"> : </span><span class="hl-quotes">"</span><span class="hl-string">Doe</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">id</span><span class="hl-code">       : </span><span class="hl-number">5566</span><span class="hl-code">,
  </span><span class="hl-identifier">fullName</span><span class="hl-code"> : </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">firstName</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">lastName</span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">;</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>说明: <b>this.firstName</b> 表示
<b>this</b> (person) 对象的  <b>firstName</b> 属性。 </p>
<hr/>
<h2>显式函数绑定</h2>
<p>在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。</p>
<p>在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, <b>this</b> 将指向 person2, 即便它是 person1 的方法：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person1</span><span class="hl-code"> = </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">fullName</span><span class="hl-code">: </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">firstName</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-reserved">this</span><span class="hl-code">.</span><span class="hl-identifier">lastName</span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">person2</span><span class="hl-code"> = </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">firstName</span><span class="hl-code">:</span><span class="hl-quotes">"</span><span class="hl-string">John</span><span class="hl-quotes">"</span><span class="hl-code">,
  </span><span class="hl-identifier">lastName</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">Doe</span><span class="hl-quotes">"</span><span class="hl-code">,
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">person1</span><span class="hl-code">.</span><span class="hl-identifier">fullName</span><span class="hl-code">.</span><span class="hl-identifier">call</span><span class="hl-brackets">(</span><span class="hl-identifier">person2</span><span class="hl-brackets">)</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment"> 返回 "John Doe"</span><span class="hl-comment"></span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    